.page-loading
  display: flex
  justify-content: center
  align-items: center
  height: 100%

  &-wrap
    display: flex
    flex-direction: column
    align-items: center

    .logo
      margin-bottom: 40px
      // background-image: linear-gradient(70deg, transparent 10%, rgba(255, 255, 255, 0.1) 15%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.1) 35%, transparent 40%)
      // background-repeat: no-repeat
      // animation: 1.5s loop_flash 5s infinite

      // @keyframes loop_flash
      //   form
      //     background-position: -400px 0

      //   to
      //     background-position: 400px 0

    .progress
      position: relative
      width: 340px
      height: 8px;
      margin-bottom: 20px
      background: #19265D
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5)
      border-radius: 10px
      border: 1px solid #283D93

      &-slider
        position: absolute
        top: 0
        left: 0
        width: 0
        height: 8px
        border-radius: 10px
        background-color: #5273FF
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%)
        background-size: 30px 30px
        transition: width 1s
        animation-duration: 1s
        animation-fill-mode: forwards
        animation-iteration-count: infinite
        animation-name: loop_scroll
        animation-timing-function: linear
        will-change: auto

        @keyframes loop_scroll
          from
            background-position: -30px 0

          to
            background-position: 30px 0

        &.competed
          background: #5273FF

        &-indicator
          position: absolute
          right: -15px
          top: -11px
          width: 30px
          height: 30px
          text-align: center
          line-height: 32px
          background: #19265D
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5), 0px 2px 4px 0px rgba(0, 0, 0, 0.5), 0px 2px 4px 0px rgba(0, 0, 0, 0.5)
          border: 1px solid #5273FF
          border-radius: 50%

          &.competed
            background: #5273FF
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5), 0px 2px 4px 0px rgba(0, 0, 0, 0.5), 0px 2px 4px 0px rgba(0, 0, 0, 0.5)
            border: 1px solid #19265D

    .description
      text-align: center

      &-percentage
        margin-bottom: 10px
        font-size: 36px
        font-weight: 500
        color: #fff

      &-text
        font-size: 20px
        color: #B6B6B6
